import {
  ECameraMode,
  EDesignMode,
  ModelCameraService,
  ModelViewerService,
  SceneService,
} from '@manycore/custom-sdk';
import { Button, Select, Space } from 'ant-design-vue';
import { defineComponent, Fragment } from 'vue';

import { designModes, RenderModes, cameraModes } from '../../constant';
import { getApplication } from '../../core/app';
import { CameraMoveControl } from './CameraMoveControl';

const viewerService = getApplication().getService(ModelViewerService);
const cameraService = getApplication().getService(ModelCameraService);
const sceneService = getApplication().getService(SceneService);

const { Option } = Select;

function _Footer() {
  const isShowMoveControl = ref(false);

  const handleCameraModeChange = (mode: ECameraMode) => {
    cameraService.toggleCameraMode(mode);
  };

  const changeDesignMode = (mode: EDesignMode) => {
    sceneService.setDesignMode({ mode });
  };
  return () => (
    <Fragment>
      <div>
        <Space>
          <Button
            onClick={() => viewerService.resetPerspective()}
          >
            重置视角
          </Button>
          <Select defaultValue={cameraModes[0].mode} onChange={(val) => handleCameraModeChange(val as ECameraMode)}>
            {cameraModes.map((cm) => {
              return <Option value={cm.mode}>{cm.text}</Option>;
            })}
          </Select>
          <Select defaultValue={0} onChange={(val) => isShowMoveControl.value = !!val}>
            <Option value={1}>
              开启控件
            </Option>
            <Option value={0}>
              关闭控件
            </Option>
          </Select>
          <Select defaultValue={RenderModes[0].text}>
            {RenderModes.map((mode) => {
              return (
                <Option
                  onClick={() => {
                    viewerService.toggleModelBorder(mode.isSetBorder);
                    viewerService.toggleModelTransparent(mode.isSetTransparent);
                  }}
                  value={mode.text}
                >
                  {mode.text}
                </Option>
              );
            })}
          </Select>
          <Select defaultValue={designModes[2].mode} onChange={(val) => changeDesignMode(val as EDesignMode)}>
            {designModes.map((d) => {
              return <Option value={d.mode}>{d.text}</Option>;
            })}
          </Select>
        </Space>
      </div>
      {isShowMoveControl.value && <CameraMoveControl />}
    </Fragment>
  );
}

export default defineComponent({
  setup: _Footer
})
